<template>
	<view class="uesrpage">
		<Login></Login>
		<view class="searchpage">
			<view class="uesrname">
				<view class="" style="text-align: right; box-sizing: border-box;padding-right: 52rpx;">
					<text class="icon1 iconfont icon-baocuocha " @click="fanhui"></text>
				</view>
				<view class="touxiang">
					<image :src="imageUrl" mode=""></image>
				</view>
				<view class="name">
					<text style="padding-right: 20rpx;">{{nickName}}</text>
					<text class="icon iconfont  icon-bianxie"></text>
				</view>
				<view class="zengsong">
					<view class="">
						<text class="num">{{rows.length}}</text>个 已拥有
					</view>
					<view class="">
						<text class="num">0</text>个 已赠出
					</view>
				</view>
			</view>
			<view class="uesrFooter">
				<view class="uesrFooter-top">
					<view class="">
						<text class="icon iconfont icon-erji paddingten"></text>
						<text>联系客服</text>
					</view>
					<view class="">
						<text class="icon iconfont icon-24gl-arrowRight2"></text>
					</view>
				</view>
				<view class="uesrFooter-top">
					<view class="" @click="logOut">
						<text class="icon iconfont icon-tuichu paddingten"></text>
						<text>退出登录</text>
					</view>
					<view class="">
						<text class="icon iconfont icon-24gl-arrowRight2 "></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Login from "../../common/login/login.vue"
	import BaseUrl from "../../utlis/api.js"
	export default {
		components: {
			Login
		},
		data() {
			return {
				nickName: '',
				imageUrl: "",
				userId: null,
				rows: []
			}
		},
		onLoad() {
			this.toUser();
			this.getDataList()
		},
		methods: {
			toUser() {
				let that = this
				uni.getStorage({
					key: 'userInfo',
					success(res) {
						console.log(res)
						that.nickName = res.data.nickName;
						that.imageUrl = res.data.avatarUrl
					}

				})
			},
			fanhui(){
				uni.navigateTo({
					url: '/pages/index/index',
				})
			},
			getDataList() {
				if (wx.getStorageSync("userInfo")) {
					const token = wx.getStorageSync('token') || [];
					const userId = wx.getStorageSync('userId');
					uni.request({
						url: BaseUrl + "/wx/sbox/box/list?userId=" + userId,
						method: 'GET',
						header: {
							"Authorization": "Bearer " + token,
						},
						data: userId,
						success: (res) => {
							console.log(res)
							this.rows = res.data.rows
						}
					})
				}
			},
			logOut() {
				wx.removeStorage({
					key: 'token',
				})
				wx.removeStorage({
					key: 'userInfo',
				})
				wx.removeStorage({
					key: 'userId',
				})
				wx.removeStorage({
					key: 'code',
				})
				uni.navigateTo({
					url: '/pages/index/index',
					success() {
						uni.showToast({
							title: "已退出登录"
						});
					}
				})
			}
		}
	}
</script>

<style>
	.uesrpage {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
		font-family: PingFang SC;
		font-weight: bold;
		color: #707070;
		opacity: 1;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
	}

	.uesrname {
		width: 100%;
		height: 440rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
	}

	.touxiang {
		width: 100%;
		height: 108rpx;

	}

	.touxiang>image {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.name {
		font-size: 32rpx;
		padding-top: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 36rpx;
		color: #444444;
		opacity: 1;
	}

	.icon {
		font-size: 32rpx;
		color: #818181;
		padding-right: 10rpx;
	}

	.zengsong {
		height: 74rpx;
		line-height: 74rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 44rpx;
	}

	.zengsong>view {
		width: 50%;
		height: 100%;
	}

	.zengsong>view:nth-child(1) {
		border-right: 1px solid #707070;
	}

	.num {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 18px;
		color: #444444;
		opacity: 1;
		box-sizing: border-box;
		padding-right: 10rpx;
	}

	.uesrFooter {
		width: 100%;
		box-sizing: border-box;
		padding-left: 76rpx;
		padding-right: 74rpx;
		text-align: center;
	}

	.uesrFooter-top {
		width: 100%;
		height: 116rpx;
		line-height: 116rpx;
		border-bottom: 1px solid #E2E1DD;
		display: flex;
		justify-content: space-between;
	}

	.paddingten {
		padding-right: 20rpx;
	}
</style>
